<!--  -->
<template>
  <div class="tab_component">
    <ul class="tab_component_ul">
      <li
        class="tab_component_li"
        v-for="item in tabs" :key="item.tabIndex"
        @click="tab(item)"
        @mouseover="mouseover(item.tabIndex)"
        @mouseout="mouseout(item.tabIndex)">

        <span :class="{activeTitle:item.tabIndex === numTabOrder}">{{item.tabTitle}}</span>

        <div class="bgImg">
          <img v-show="item.tabIndex === numTabOrder || item.tabIndex === imgShow" :src="homeImgBg" alt="">
        </div>

      </li>
    </ul>
     <div class="tabCon">
       <slot></slot>
     </div>

  </div>
</template>

<script>
export default {
  props: {
    tabs: {
      type: Array,
      default: () => []
    },
    homeImg: {
      type: String,
      default: ''
    },
    homeImgBg: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      imgShow: '0',
      numTabOrder: '0'
    }
  },
  components: {
    // numTabOrder: {
    //   get () {
    //     alert(111)
    //     return this.numTabOrder
    //   }
    // }
  },
  computed: {},
  created () {},
  mounted () {},
  methods: {
    tab (item) {
      this.numTabOrder = ''
      this.numTabOrder = item.tabIndex
      this.$emit('tabClick', item)
    },
    mouseover (tabIndex) {
      this.imgShow = tabIndex
    },
    mouseout () {
      this.imgShow = this.numTabOrder
    }
  }
}

</script>

<style lang='stylus' rel='stylesheet/stylus' scoped>
.tab_component_ul {
  display flex
  justify-content center
  margin 0 0 30px
  // background url(../../assets/img/gaishu-menu-hr.png) no-repeat
  background-position center
  .tab_component_li {
    position relative
    width 148px
    height 38px
    line-height 38px
    margin 0 10px
    cursor default
    text-align center
    &:hover {
      color #000
    }
    span {
      position absolute
      left 27px
      width 116px
      z-index 501
    }
    .bgImg {
      position absolute
      top 0
      left 0
      img {
        width 148px
        height 38px
      }
    }
  }
}

.activeTitle {
  color #000
}
.tabCon {
}

</style>
